<template>
	<view class="group">
		<view class="title">
			<text>{{ detail.title }}</text> 
		</view>
		<view class="info">
			<text>{{ detail.name }}</text>
			<text>{{ detail.time }}</text>
		</view>
		<view class="picture">
			<image :src="detail.img" mode="aspectFill"></image>
		</view>
		<view class="content">
			<text>{{ detail.content }}</text>
		</view>
		<view class="price">
			<text>价格：￥{{ detail.presentPrice }}</text>
			<text>原价：￥{{ detail.originalPrice }}</text>
			
		</view>
		<view class="details">
			<text>截止日期：{{ detail.endTime }}</text>
			<text>咨询电话：{{ detail.telephone }}</text>
			<text>注意事项：{{ detail.note }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {} // 初始化详情对象
			}
		},
		onLoad(options) {
			const id = options.id; // 从页面参数中获取id
			this.fetchDetailById(id); // 调用方法获取详情数据
		},
		methods: {
			fetchDetailById(id) {
				// 模拟请求服务器获取详情数据
				// 实际开发中，这里应该是一个API请求
				uni.request({
					url: 'http://localhost/dev-api/business/buying/' + id, // 你的API地址
					method: 'GET',
					header: {
						'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImRhZTc3OTJmLWU5YmQtNDhlMS05M2VhLWUzMzY1Y2QxNDRlNyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.x5zqYUrXB05k3IDS5uovyCLXp1n7e0dHeAp2vx-OsXQgQS7G_dhciRlL75zghiBfgY4-xU08p1GqljYkOShI-A',
						'Content-Type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							this.detail = res.data.data; // 将获取到的数据赋值给detail对象
						} else {
							uni.showToast({
								title: '获取详情失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>


<style>
.group{

}
.title{
	
	line-height: 25px;

	font-size: 18px;
	
	font-family: PingFangSC-regular;
	font-weight: bold;
	
	text-align:center
}
.info{
	  
	  display: flex;  
	  justify-content: space-between;  
	  align-items: center;  
	  /* 可以添加其他样式，如padding, margin等 */  
	  font-weight: bold;
	  margin: 10rpx 20rpx 10rpx 20rpx;
	
	
}
.picture>image{
	
	width:100%;
	height: 213px;
	
}
.content{
	left: 14px;
	top: 377px;
	width: 355px;
	height: 109px;
	line-height: 20px;
	color: rgb(16,16,16);
	font-size: 14px;
	text-align: left;
	font-family: PingFangSC-regular;
	text-indent:28px;
	margin-left: 20rpx;
	margin-bottom: 20rpx;

}
.price{
	font-size: 14px;
	font-weight: bold;
	margin-left: 50rpx;
	margin-bottom: 20rpx;
}
.price>text:nth-child(2){
	color: red;
	margin-left: 40rpx;
	text-decoration-line:line-through;
	text-decoration-color:red
}
.details{
	margin-left: 50rpx;
}
.details>text{
	margin-right: 300rpx;
	font-weight: bold;
}
.details>text:nth-child(2){
	margin-right: 350rpx;
}

</style>
